<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">角色列表</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 白色区域 -->
  <div class="page_content">
    <el-button type="primary" @click="addRole">新建角色</el-button>
    <el-table :data="rolesList" style="width: 100%">
      <el-table-column prop="roleName" label="角色名" width="width">
      </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="width">
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template #default="scope">
          <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 编辑弹窗 -->
  <el-dialog
    v-model="dialogFormEVisible"
    :title="formData.id ? '编辑角色' : '新建角色'"
    width="40%"
    @close="clearForm"
  >
    <el-form
      ref="userForm"
      :model="formData"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="formData.roleName" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="formData.roleDesc" placeholder="请输入用户描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancalEdit">取消</el-button>
        <el-button type="primary" @click="submitForm(userForm)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import {
  getRolesApi,
  addRolesApi,
  editRolesApi,
  rolesDeleteApi,
} from "@/util/request.js";
export default {
  name: "roles",
  setup() {
    const data = reactive({
      rolesList: [],
      dialogFormEVisible: false,
      formData: {
        roleName: "",
        roleDesc: "",
      },
      rules: {
        roleName: {
          required: true,
          message: "此项为必填项！",
          trigger: "blur",
        },
      },
    });
    // 获取列表信息
    const getList = () => {
      getRolesApi().then((res) => {
        console.log(res);
        data.rolesList = res.data;
      });
    };
    // 编辑角色
    const editRow = (row) => {
      data.dialogFormEVisible = true;
      data.formData.id = row.id;
      data.formData.roleName = row.roleName;
      data.formData.roleDesc = row.roleDesc;
    };
    // 删除按钮的回调
    const deleteRow = (row) => {
      rolesDeleteApi(row).then((res) => {
        getList();
      });
    };
    // 重新获取页面
    getList();
    const userForm = ref();
    const clearForm = () => {
      // 清空表单
      data.formData = {};
    };
    // 新建角色的回调
    const addRole = () => {
      // 关闭对话框
      data.dialogFormEVisible = true;
      // 清空表单
      data.formData = {};
    };
    // 编辑的取消按钮
    const cancalEdit = () => {
      // 关闭对话框
      data.dialogFormEVisible = false;
      // 清空表单
      data.formData = {};
    };
    // 编辑的确认按钮
    const submitForm = (FormEl) => {
      // 对form表单进行验证
      FormEl.validate((res) => {
        if (!res) {
          return;
        }
        // 提交修改
        if (data.formData.id) {
          editRolesApi(data.formData).then((res) => {
            if (res.data) {
              // 初始化页面
              getList();
              // 关闭弹窗
              data.dialogFormEVisible = false;
            }
          });
        } else {
          addRolesApi(data.formData).then((res) => {
            if (res.data) {
              // 初始化页面
              getList();
              // 关闭弹窗
              data.dialogFormEVisible = false;
            }
          });
        }
      });
    };
    return {
      ...toRefs(data),
      editRow,
      deleteRow,
      userForm,
      clearForm,
      addRole,
      cancalEdit,
      submitForm,
    };
  },
};
</script>

<style>
</style>